// 招商总需求占比
;
(function() {
	let myChart = echarts.init(document.querySelector('.charts1'));
	let option = {
		color: ['#63368b', '#d33c7b'],
		title: {
			text: '招商总需求占比',
			left: 'center',
			textStyle:{
				color:'#fff'
			}
		},
		tooltip: {
			trigger: 'item',
			formatter: '{a} <br/>{b} : {c} ({d}%)'
		},
		legend: {
			orient: 'vertical',
			left: 'left',
			data: ['园区企业数量', '招商数量缺口'],
			icon: 'circle',
			left: '60%',
			bottom: '10%',
			textStyle:{
				color:'#fff'
			}
		},
		series: [{
			name: '招商总需求占比',
			type: 'pie',
			radius: ['34%', '55%'],
			center: ['50%', '45%'],
			data: [{
					value: 25,
					name: '招商数量缺口'
				},
				{
					value: 75,
					name: '园区企业数量'
				},
			],
			emphasis: {
				itemStyle: {
					shadowBlur: 10,
					shadowOffsetX: 0,
					shadowColor: 'rgba(0, 0, 0, 0.5)'
				}
			}
		}]
	};
	myChart.setOption(option);
	window.addEventListener('resize', () => {
		myChart.resize();
	});
})();

// 招商总面积占比(m3)
;
(function() {
	let myChart = echarts.init(document.querySelector('.charts2'));
	let option = {
		color: ['#436976', '#db5f30'],
		title: {
			text: '招商企业总面积占比(㎡)',
			left: 'center',
			textStyle:{
				color:'#fff'
			}
		},
		tooltip: {
			trigger: 'item',
			formatter: '{a} <br/>{b} : {c} ({d}%)'
		},
		legend: {
			orient: 'vertical',
			left: 'left',
			data: ['园区企业面积', '招商面积缺口'],
			icon: 'circle',
			left: '60%',
			bottom: '10%',
			textStyle:{
				color:'#fff'
			}
		},
		series: [{
			name: '招商总面积占比',
			type: 'pie',
			radius: '55%',
			center: ['50%', '45%'],
			data: [{
					value: 25,
					name: '招商面积缺口'
				},
				{
					value: 75,
					name: '园区企业面积'
				},
			],
			emphasis: {
				itemStyle: {
					shadowBlur: 10,
					shadowOffsetX: 0,
					shadowColor: 'rgba(0, 0, 0, 0.5)'
				}
			}
		}]
	};

	myChart.setOption(option);
	window.addEventListener('resize', () => {
		myChart.resize();
	});
})();


//企业续约全收入统计
;
(function() {
	let colorss = ['#995cb1', '#ffbf4c', '#04b1c9', '#ef7472']
	let myChart = echarts.init(document.querySelector('.charts3'));
	let option = {
		title: {
			text: '企业续约全收入统计',
			left: 'center',
			textStyle:{
				color:'#fff'
			}
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: { // 坐标轴指示器，坐标轴触发有效
				type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
			}
		},
		grid: {
			left: '3%',
			right: '8%',
			bottom: '3%',
			containLabel: true
		},
		xAxis: [{
			type: 'category',
			name: '月份',
			data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
			axisTick: {
				alignWithLabel: true
			},
			axisLine: {
				lineStyle: {
					color: '#fff'
				}
			},
		}],
		yAxis: [{
			type: 'value',
			name: '收入',
			axisLine: {
				lineStyle: {
					color: '#fff'
				}
			},
		}],
		series: [{
			name: '企业数',
			type: 'bar',
			barWidth: '20',
			data: [200, 72, 120, 170, 150, 100, 130, 150, 200, 100, 130, 150],
			itemStyle: {
				normal: {
					color: (op) => {
						let i = op.dataIndex
						if (!(i % 2)) {
							return colorss[0]
						} else if (!(i % 3)) {
							return colorss[1]
						} else if (!(i % 4)) {
							return colorss[2]
						}
						return colorss[3]
					}
				}
			}
		}]
	};
	myChart.setOption(option);
	window.addEventListener('resize', () => {
		myChart.resize();
	});
})();


// 园区租金收益统计（万）
;
(function() {
	let myChart = echarts.init(document.querySelector('.charts4'));
	let option = {
		title: {
			text: '园区租金收益统计（万）',
			left: 'center',
			textStyle:{
				color:'#fff'
			}
		},
		grid: {
			left: '12%',
			top: '15%',
			bottom: '12%',
			right: '8%'
		},
		tooltip: {
			trigger: 'axis',
			formatter: (op) => {
				const o = op[0]
				return `${o.name}<br/>${o.marker}企业投资总额 ${o.value} 万元`
			}
		},
		xAxis: {
			data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
			axisTick: {
				show: false
			},
			axisLine: {
				lineStyle: {
					color: '#ccc',
					width: 1 //这里是为了突出显示加上的
				}
			},
			splitLine: {
				show: true,
				lineStyle: {
					color: 'rgba(0, 0, 0, 0.5)',
					width: 0.5,
					type: 'dashed'
				}
			},
			axisLabel: {
				textStyle: {
					color: '#ccc',
					fontSize: 12
				}
			}
		},
		yAxis: [{
			axisTick: {
				show: true
			},
			axisLine: {
				lineStyle: {
					color: '#ccc',
					width: 1 //这里是为了突出显示加上的
				}
			},
			axisLabel: {
				textStyle: {
					color: '#ccc'
				}
			},
			splitArea: {
				areaStyle: {
					color: 'rgba(0,0,0,.5)'
				}
			},
			splitLine: {
				show: true,
				lineStyle: {
					color: 'rgba(0, 0, 0, 0.5)',
					width: 0.5,
					type: 'dashed'
				}
			}
		}],
		series: [{
			type: 'pictorialBar',
			barCategoryGap: '0%',
			symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
			label: {
				show: true,
				position: 'top',
				distance: 1,
				color: '#08DFFE',
				fontWeight: '0',
				fontSize: 15,
			},
			itemStyle: {
				normal: {
					color: {
						type: 'linear',
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [{
								offset: 0,
								color: '#9A11FF'
							},
							{
								offset: 1,
								color: '#08DFFE'
							}
						],
						global: false //  缺省为  false
					}
				},
				emphasis: {
					opacity: 1
				}
			},
			data: [160, 25, 18, 12, 19, 32, 11, 26, 56, 42, 63, 23]
		}]
	};
	myChart.setOption(option);
	window.addEventListener('resize', () => {
		myChart.resize();
	});
})();



// 退租企业数量统计

;
(function() {
	let colorss = ['#f1830e', '#2aadd1']
	let myChart = echarts.init(document.querySelector('.charts5'));
	let option = {
		title: {
			text: '退租企业数量统计',
			left: 'center',
			textStyle:{
				color:'#fff'
			}
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: { // 坐标轴指示器，坐标轴触发有效
				type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
			}
		},
		grid: {
			left: '3%',
			right: '8%',
			bottom: '3%',
			containLabel: true
		},
		xAxis: [{
			type: 'category',
			name: '月份',
			data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
			axisTick: {
				alignWithLabel: true
			},
			axisLine: {
				lineStyle: {
					color: '#ccc'
				}
			},
		}],
		yAxis: [{
			type: 'value',
			name: '退租数量',
			axisLine: {
				lineStyle: {
					color: '#ccc'
				}
			},
		}],
		series: [{
			name: '企业数',
			type: 'bar',
			barWidth: '20',
			data: [200, 72, 120, 170, 150, 100, 130, 150, 200, 100, 130, 150],
			itemStyle: {
				normal: {
					color: (op) => {
						let key = op.dataIndex % 2
						if (key) {
							return colorss[0]
						}
						return colorss[1]
					}
				}
			}
		}]
	};
	myChart.setOption(option);
	window.addEventListener('resize', () => {
		myChart.resize();
	});
})();
// 园区出租率变化趋势
;
(function() {
	let myChart = echarts.init(document.querySelector('.charts6'));
	let data = ['2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014'],
		total = 0
	data.forEach(v => {
		total += +v
	})
	let option = {
		color: '#cfdf62',
		title: {
			text: '园区出租率变化趋势',
			left: 'center',
			top: 10,
			textStyle:{
				color:'#fff'
			}
		},
		tooltip: {
			trigger: 'axis',
			formatter: function(op) {
				const o = op[0]
				return `${o.seriesName} <br/> ${o.name}  出租率 <span style="color:'#cfdf62'">${((o.value/total)*100).toFixed(2)+'%'}</span> `
			}
		},
		grid: {
			top: '20%',
			left: '10%',
			right: '10%',
			bottom: '10%'
		},
		xAxis: {
			name: '年份',
			type: 'category',
			boundaryGap: false,
			data: data,
			axisLine: {
				lineStyle: {
					color: '#ccc'
				}
			},
		},
		yAxis: {
			type: 'value',
			name: '百分率 ',
			axisLine: {
				lineStyle: {
					color: '#ccc'
				}
			},
		},
		series: [{
			name: '园区出租率变化趋势',
			data: [820, 932, 901, 934, 1290, 1330, 1320, 1234, 1211, 996],
			type: 'line',
			areaStyle: {}
		}]
	};

	myChart.setOption(option);
	window.addEventListener('resize', () => {
		myChart.resize();
	});
})();


//园区潜在招商企业分布
;
(function() {
	let myChart = echarts.init(document.querySelector('.chinaMaps'));
	console.log(myChart);
	const data = [{
			'name': '北京',
			'value': 3031
		},
		{
			'name': '天津',
			'value': 1880
		},
		{
			'name': '河北',
			'value': 3601
		},
		{
			'name': '山西',
			'value': 1681
		},
		{
			'name': '内蒙古',
			'value': 1728
		},
		{
			'name': '辽宁',
			'value': 2531
		},
		{
			'name': '吉林',
			'value': 1507
		},
		{
			'name': '黑龙江',
			'value': 1636
		},
		{
			'name': '上海',
			'value': 3267
		},
		{
			'name': '江苏',
			'value': 9259
		},
		{
			'name': '浙江',
			'value': 5619
		},
		{
			'name': '安徽',
			'value': 3000
		},
		{
			'name': '福建',
			'value': 3580
		},
		{
			'name': '江西',
			'value': 2198
		},
		{
			'name': '山东',
			'value': 7646
		},
		{
			'name': '河南',
			'value': 4805
		},
		{
			'name': '湖北',
			'value': 3936
		},
		{
			'name': '湖南',
			'value': 3642
		},
		{
			'name': '广东',
			'value': 9727
		},
		{
			'name': '广西',
			'value': 2035
		},
		{
			'name': '海南',
			'value': 483
		},
		{
			'name': '重庆',
			'value': 2036
		},
		{
			'name': '四川',
			'value': 4067
		},
		{
			'name': '贵州',
			'value': 1480
		},
		{
			'name': '云南',
			'value': 1788
		},
		{
			'name': '西藏',
			'value': 147
		},
		{
			'name': '陕西',
			'value': 2443
		},
		{
			'name': '甘肃',
			'value': 824
		},
		{
			'name': '青海',
			'value': 286
		},
		{
			'name': '宁夏',
			'value': 370
		},
		{
			'name': '新疆',
			'value': 1219
		},
		{
			'name': '台湾',
			'value': 888
		}
	]
	let option = {
		title: {
			text: '园区潜在招商企业分布',
			left: 'center',
			top: 10,
			textStyle:{
				color:'#fff'
			}
		},
		tooltip: {
			show: true,
			formatter: function(params) {
				return params.marker + params.name + '：' + params.data['value']
			}
		},
		visualMap: {
			type: 'continuous',
			showLabel: true,
			seriesIndex: [0],
			min: 1,
			max: 5000,
			inRange: {
				color: ['#0062b1', '#0062b1']
			},
			textStyle: {
				color: '#000'
			},
			show: false,
			bottom: 30,
			left: 'left'
		},
		geo: {
			roam: 'scale',
			map: 'china',
			left: 'center',
			top:40,
			layoutSize: '10%',
			zoom: 0.7,
			scaleLimit: {
				min: 0.6,
				max: 2
			},
			label: {
				show: false,
				position: ['50%', '40%'],
				formatter: (options) => {
					console.log(options)
					const name = options.name
					if (name === '南海诸岛') return ''
					return name
				},
				color: 'rgba(255,255,255,.5)',
				fontSize: 10,
				align: 'center',
				emphasis: {
					show: false
				}
			},
			itemStyle: {
				normal: {
					borderColor: '#fff',
					borderWidth: 0.1,
					areaColor: 'rgba(70,85,96,.5)'
				},
				emphasis: {
					areaColor: 'rgba(10, 255, 255,.8)',
					lable: {
						show: false,
						color: 'rgba(255,255,255,.8)'
					}
				}
			},
			regions: [{
				name: '南海诸岛',
				value: 0,
				itemStyle: {
					normal: {
						opacity: 0,
						label: {
							show: true
						}
					}
				}
			}]
		},
		series: [{
			name: 'mapSer',
			type: 'map',
			roam: false,
			geoIndex: 0,
			label: {
				show: false
			},
			data: data
		}]
	}


	myChart.setOption(option);
	window.addEventListener('resize', () => {
		myChart.resize();
	});
})();


// 园区新入驻企业

;
(function() {
	let dom = document.querySelector(".top4 .box_content")
	let iconList = ['icon/logo/ali.png', 'icon/logo/deili.png', 'icon/logo/huawei.png', 'icon/logo/lenovo.png',
		'icon/logo/meidi.png', 'icon/logo/sumsung.png', 'icon/logo/yahu.png', 'icon/logo/zte.png'
	]

	iconList.map(v => {
		return `<div class="logoItem"><img src="${v}"/></div>`
	}).forEach(v => {
		dom.innerHTML += v
	})
})()

// ;
// (function () {
//   let myChart = echarts.init(document.querySelector(' '));
//   let option = {};
//   myChart.setOption(option);
//   window.addEventListener('resize', () => {
//     myChart.resize();
//   });
// })();
